<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>谷歌地图显示</title>
    <!--引入第三方的jquery脚本库-->
    <script src="./static/libs/include-mapboxgl-local.js"></script>
    <style type="text/css">
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .dropdown {
            position: absolute;
            right: 20px;
            top: 10px;
            z-index: 1000;
        }

        .dropdown-menu {
            min-width: 95px;
        }
    </style>
    <script>
        //使用严格模式
        'use strict';
        var map;
        /** 地图初始化
         */
        function init() {
            //实例化Map对象加载地图
            map = new mapboxgl.Map({
                //地图容器div的id
                crs: "EPSG:4326",
                container: 'map',
                center: [110,30],
                zoom: 3,
                //设置地图样式信息
                style: {
                    version: 8,
                    name: '全球地化 Style',
                    crs: "EPSG:4326",
                    metadata: {
                        'mapbox:autocomposite': false,
                        'mapbox:type': 'template',
                        'maputnik:renderer': 'mbgljs',
                        'openmaptiles:version': '3.x'
                    },
                    sources: {
                        全球地化: {
                            type: 'vector',
                            tiles: ['http://develop.smaryun.com:6163/igs/rest/mrms/tile/全球地化/{z}/{y}/{x}?type=cpbf'],
                            minZoom: 0,
                            maxZoom: 5
                        },
                        天地图: {
                            type: 'raster',
                            tiles: [
                                'http://t6.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=f5347cab4b28410a6e8ba5143e3d5a35'
                            ],
                            minzoom: 0,
                            maxzoom: 14
                        }
                    },
                    sprite: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/sprite',
                    glyphs: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf',
                    layers: [
                        {
                            id: '背景',
                            type: 'background',
                            paint: {
                                'background-color': 'rgba(247, 247, 247, 1)'
                            }
                        },
                        {
                            id: '天地图',
                            type: 'raster',
                            source: '天地图'
                        },
                        {
                            id: '全国地化2',
                            type: 'symbol',
                            source: '全球地化',
                            'source-layer': '全国地化2',
                            minzoom: 0,
                            maxzoom: 5,
                            layout: {
                                visibility: 'visible',
                                'icon-image': '110101_大地原点'
                            },
                            paint: {}
                        }
                    ],
                    id: '全球地化-id',
                    crs: null,
                    path: 'F:\\Data\\GIS\\VectorTile\\全球地化'
                }
            });
            //注册鼠标移动事件
            map.on('mousemove', function (e) {
                //经纬度坐标转web墨卡托
                const earthRad = 6378137.0;
                const x = e.lngLat.lng * Math.PI / 180 * earthRad;
                const a = e.lngLat.lat * Math.PI / 180;
                const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
                document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
            });
        }
        /** 图层切换
         */
        function changeLayer(src) { }
    </script>
</head>

<body onload="init()">
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
</body>

</html>